// 该组件需要传入一个元素，该元素会在组件内部作为打开打功能对话框的按钮
// 并且传入一个函数，在点击确认的时候触发的回调函数，该函数应携带选中项作为参数
<template>
  <main>
    <div @click="dialogVisible = true">
      <slot></slot>
    </div>
    <el-dialog title="提示" :visible.sync="dialogVisible" width="50%" append-to-body destroy-on-close @open="toggleSelection">
      <div class="h50vh">
        <!-- 多选表格 -->
        <section v-if="checkbox">
          <el-table v-loading="loading" ref="tableRef" :data="tableData" @selection-change="checkeChange" stripe style="width: 100%">
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column prop="name" label="小组名字"> </el-table-column>
          </el-table>
        </section>
        <!-- 单选表格 -->
        <section v-else>
          <el-table v-loading="loading" ref="tableRef" :data="tableData" @row-click="rowClick" :highlight-current-row="true" stripe style="width: 100%">
            <el-table-column prop="name" label="小组名字"> </el-table-column>
          </el-table>
        </section>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="pushSelected">确 定</el-button>
      </span>
    </el-dialog>
  </main>
</template>

<script>
import * as api from '../api/private/group/index'
export default {
  props: {
    checkbox: false,
    // 默认选中项
    defaultSelect: null,
    // 查询方式
    _type: {
      default: ''
    },
    // 查询值
    _type_value: {
      default: ''
    }
  },
  data() {
    return {
      tableData: [],
      dialogVisible: false,
      loading: false
    }
  },
  mounted() {},
  methods: {
    async toggleSelection() {
      //   获取员工列表
      await this.getGroup()
      // 设置默认选中项
      await this.$nextTick(() => {
        let then = this
        // 停留一帧，确保拿到 ref
        if (this.defaultSelect) {
          if (this.checkbox) {
            // 数组
            let arr = []
            this.defaultSelect.forEach(item => {
              if (item instanceof Object) {
                let target = then.queryItem(item.id)
                target && arr.push(target)
              } else {
                let target = then.queryItem(item)
                target && arr.push(target)
              }
            })
            arr.forEach(item => {
              this.$refs.tableRef.toggleRowSelection(item)
            })
          } else {
            // 单个
            if (this.defaultSelect instanceof Object) {
              let target = then.queryItem(this.defaultSelect)
              this.$refs.tableRef.setCurrentRow(then.queryItem(this.defaultSelect.id))
              this.selected = target
            } else {
              let target = then.queryItem(this.defaultSelect)
              this.$refs.tableRef.setCurrentRow(target)
              this.selected = target
            }
          }
        }
      })
      return
    },
    // 传入 id 查询到对应的数据
    queryItem(id) {
      let target = null
      this.tableData.some(item => {
        if (item.id == id) {
          target = item
          return true
        }
      })
      return target
    },
    // 获取所有可用设备
    async getGroup() {
      this.loading = true
      let req = {}
      let res = await api.getGroupList(req)
      if (res.code == 0) {
        this.tableData = res.data
      } else {
        this.msg.error(res.msg)
      }

      this.loading = false
    },
    // 多选表格-选择项改变事件
    checkeChange(arr) {
      this.selected = arr
    },
    // 单选表格-行点击事件
    rowClick(row) {
      this.selected = row
    },
    // 向外抛出选中项
    pushSelected() {
      this.$emit('selectChange', this.selected)
      this.dialogVisible = false
    }
  }
}
</script>

<style>
</style>